<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道一切</title>
    <link rel="icon" href="" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<!--头部-->
<header id="header">
    <!--头部左边-->
    <div class="header-left">
        <span><img src="images/weather.png" alt="" align="center"></span>
        <span class="msg-span">
        <span>|</span>
        <a href="">换肤</a>
        <a href="">消息</a>
    </span>

    </div>

    <!--头部右边-->
    <div class="header-right">
        <a href="">新闻</a>
        <a href="">hao123</a>
        <a href="">地图</a>
        <a href="">视频</a>
        <a href="">贴 吧</a>
        <a href="">学术</a>
        <a href="">登录设置</a>
        <a href="" class="more-product">更多产品</a>
    </div>

</header>
<!--搜索-->
<section id="content">
    <!--图片logo-->
    <div class="content-logo">
        <img src="images/bd_logo.png" alt="百度logo">
    </div>
    <!--搜索框和提交按钮-->
    <div class="content-search">
        <form action="http://www.baidu.com">
            <input type="text" name="content" class="search-input" placeholder="请输入查询内容">
            <input type="submit" name="searchbtn" value="百度一下" class="search-submit">
        </form>
    </div>
</section>

<!--列表-->
<section id="list">
    <!--list top -->
    <div class="list-top">
        <!--top left-->
        <div class="list-top-left">
            <a href="" id="">
                <img src="images/person_icon.png" alt="">
                <span>我的关注</span>
            </a>
            <a href="">
                <span> 推荐</span>
            </a>
            <a href="">
                <span>导航</span>
            </a>
        </div>

        <!--top right-->
        <div class="list-top-right">
            <a href=""><img src="images/setting_icon.png" alt=""></a>

        </div>


    </div>
    <!--list content -->
   <div class="list-content">
       <!--list left -->
       <div class="list-content-left">
           <div class="cell1">
               <h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3>
               <img src="images/cell_img1.png" alt="">
               <img src="images/cell_img2.png" alt="">
               <img src="images/cell_img3.png" alt="">
               <p>网易新闻 09-20 13:19</p>

           </div>
           <div class="cell2">
               <img class="cell2-img" src="images/cell_img2.png" alt="">
              <div class="cell2-title">
                  <h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3>
                  <p>网易新闻 09-20 13:19</p>
              </div>

           </div>

           <div class="cell2">
               <img  class="cell2-img" src="images/cell_img3.png" alt="">
               <div class="cell2-title">
                   <h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3>
                   <p>网易新闻 09-20 13:19</p>
               </div>

       </div>


       </div>
       <!--list right -->
       <div class="list-content-right">
           <div class="right-top">
               <h4>实时热点</h4>
               <div class="right">
                   <img src="images/circle_icon.png" alt="">
                   <a href="">换一换</a>
               </div>
           </div>
           <div class="right-ul">
               <ul>
                   <li>高晓松 丁香高晓松 丁香医医生</li>
                   <li>中国参加俄高晓松 丁香医军演</li>
                   <li>高晓松 丁香高晓松 丁香医医</li>
                   <li>中国参加俄高晓松 丁香医军演</li>
                   <li>高晓松 丁香医高晓松 丁香医生</li>
                   <li>中国参加俄军高晓松 丁香医演</li>
                   <li>高晓松 丁香医高晓松 丁香医</li>
                   <li>中国参加俄军演高晓松 丁香医</li>
                   <li>高晓松 丁香医高晓松 丁香医生</li>
                   <li>中国参加俄军高晓松 丁香医演</li>
               </ul>
           </div>

           </div>
   </div>


</section>

</body>

</html>